<template>
  <div>
      <qwerty title1="首页" title2="商品管理" title3="商品列表"></qwerty>

      <el-card style="margin-top:20px">
          <el-row :gutter="20">
            <el-col :span="8">
                <el-input placeholder="请输入内容" clearable v-model="queryInfo.query" @clear="getUsers">
                <el-button slot="append" icon="el-icon-search" @click="getUsers"></el-button></el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="add">添加商品</el-button>
            </el-col>
            </el-row>

             <el-table :data="tableData" style="width: 100%" class="font">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="goods_name" label="商品名称">
                </el-table-column>
                <el-table-column prop="goods_price" label="商品价格(元)" width="110px">
                </el-table-column>
                <el-table-column prop="goods_weight" label="商品重量" width="100px">
                </el-table-column>
                <el-table-column prop="add_time" label="创建时间" width="140px">
                    <template slot-scope="scope">
                        {{scope.row.add_time | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column prop="goods_weight" label="商品重量" width="100px">
                </el-table-column>
                <el-table-column label="操作" width="130px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="toView(scope.row)"></el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" @click='del(scope.row)'></el-button>
                    </template>
                </el-table-column>
             </el-table>
             <el-pagination @size-change="handleSizeChange" style="text-align: center;" :page-sizes="[2, 5, 10]" @current-change="handleCurrentChange" :page-size="queryInfo.pagesize" :current-page="queryInfo.pagenum" layout="total,sizes, prev, pager, next,jumper" :total="total">
             </el-pagination>
      </el-card>
  </div>
</template>

<script>
export default {
    data(){
        return{
            searchInput:'',
            tableData:[],
            total: 0, //总记录数
            // dialogVisible: false,
            queryInfo:{
              pagesize:10,
              pagenum:1,
              query:''
          },
        }
    },
    created(){
       this.getGoods();
    },
    methods:{
        // toView(row){
        //     this.$router.push('/updategoods/'+row.goods_id)
        // },
        async getGoods(){
             var {data:res}=await this.request.get("goods",{params:this.queryInfo});
            console.log(res);
            if(res.meta.status !==200){
                return this.$message.error("获取用户列表失败！")
            }
            this.tableData=res.data.goods;
            this.total=res.data.total;
        },
        handleSizeChange(size) {
            this.queryInfo.pagesize = size;
            this.getGoods();
        },
        handleCurrentChange(num) {
            this.queryInfo.pagenum = num;
            this.getGoods();
        },
        getUsers(){

        },
        add(){
            const vm = this;
            vm.$router.push({name: 'add', params: { id: 10 }})

        }
    }
}
</script>

<style lang="scss" scoped>
.font{
    font-size: 10px;
}
</style>